<template>
  <div class="box">
    <div class="container">
      <div class="search-box"></div>
      <!-- table -->
      <div class="table-box">
        <el-table :header-cell-style="{ background: '#FAFBFC', color: '#828A9D', textAlign: 'center' }"
          :cell-style="{ textAlign: 'center', color: '#1B2431' }" :data="tableData" style="width: 100%"
          v-loading="tableLoading">
          <el-table-column prop="name" label="职位名称" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="updated_at" label="更新时间" show-overflow-tooltip>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEdit(scope.row)">权限设置</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <!-- 添加 -->
    <el-dialog :title="`${roleInfoform.name} - 配置字段权限`" :close-on-click-modal="false" :visible.sync="dialogVisible"
      width="1000px" :before-close="handleClose">
      <div class="permission-list">
        <el-checkbox-group v-model="roleInfoform.checkedList">
          <div class="item-tr" v-for="(item, index) in roleInfoform.field_data" :key="index">
            <div class="item2-td">
              <div class="item2-tr">
                <div class="item2-td-main">
                  <el-tooltip class="item" effect="dark" :content="item.name" placement="right">
                    <div class="item2-td-name">
                      <el-checkbox :label="`${index + 1}`" @change="checkAll($event, index)">{{ item.name
                        }}</el-checkbox>
                    </div>
                  </el-tooltip>
                </div>
                <div class="item3-td">
                  <template v-for="(item2, indx2) in item.field_list">
                    <!-- <div class="tips" v-if="index == 1 && indx2 == 15"></div>
                    <div class="tips" v-if="index == 2 && indx2 == 8"></div>
                    <div class="tips" v-if="index == 3 && indx2 == 20"></div>
                    <div class="tips" v-if="index == 4 && indx2 == 13"></div> -->
                    <div class="item-fun" :key="indx2">
                      <el-checkbox :label="`${index + 1}-${indx2 + 1}`" @change="fieldChange($event, index, indx2)">{{
                        item2.name
                      }}</el-checkbox>
                    </div>
                  </template>
                </div>
              </div>
            </div>
          </div>
        </el-checkbox-group>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">关闭</el-button>
        <el-button type="primary" @click="submitFunc" :loading="roleInfoform.submitBtn">修 改</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import adminApi from '@/api/adminApi'
import { permission_field } from './data.js'

export default {
  name: '',
  data() {
    return {
      tableLoading: false,
      dialogVisible: false,
      tableData: [],
      roleInfoform: {
        name: '',
        checkedList: [],
        field_data: '',
        submitBtn: false,
      }
    }
  },
  watch: {

  },
  computed: {

  },
  mounted() {
    this.getList();
  },
  methods: {
    // 关闭添加弹窗
    handleClose() {
      this.roleInfoform = this.$options.data().roleInfoform;
      this.dialogVisible = false;
    },
    // 修改
    handleEdit(data) {
      console.log(data, 'handleEdit')
      let field_permissions = [];
      if (data.field_permissions) {
        field_permissions = JSON.parse(data.field_permissions);
      }
      this.roleInfoform.id = data.id;
      this.roleInfoform.name = data.name;
      let permissionField = JSON.parse(JSON.stringify(permission_field));
      let checkedList = [];
      field_permissions.map((item, idx) => {
        if (item.state == 1) checkedList.push(`${idx + 1}`)
        permissionField[idx].state = item.state;
        Object.keys(item.field_list).map((key, idx2) => {
          permissionField[idx].field_list[idx2].field_name = key
          permissionField[idx].field_list[idx2].state = item.field_list[key]
          if (item.field_list[key]) checkedList.push(`${idx + 1}-${idx2 + 1}`)
        })
      })
      this.roleInfoform.checkedList = checkedList;
      this.roleInfoform.field_data = permissionField;
      this.dialogVisible = true;
    },
    fieldChange(state, idx, idx2) {
      console.log(state, idx, idx2, "state, idx, idx2")
      this.roleInfoform.field_data[idx].field_list[idx2].state = state;
    },
    checkAll(state, idx) {
      console.log(state, idx, "state, idx")
      let field_data = this.roleInfoform.field_data;
      let field_list = field_data[idx].field_list;
      this.roleInfoform.field_data[idx].state = state ? 1 : 2
      if (state) {
        this.setChecked(field_list, idx);
      } else {
        this.setUnChecked(field_list, idx);
      }
    },
    // 设置全不选
    setUnChecked(data, idx) {
      let checkedList = this.roleInfoform.checkedList;
      data.forEach((item, idx2) => {
        let id = `${idx + 1}-${idx2 + 1}`;
        if (checkedList.includes(id)) {
          var index = checkedList.indexOf(id);
          item.state = false;
          checkedList.splice(index, 1);
        }
      });
    },
    // 设置全选
    setChecked(data, idx) {
      let checkedList = this.roleInfoform.checkedList;
      data.forEach((item, idx2) => {
        let id = `${idx + 1}-${idx2 + 1}`;
        if (!checkedList.includes(id)) {
          item.state = true;
          checkedList.push(id);
        }
      });
    },
    // 修改
    submitFunc() {
      let roleInfoform = this.roleInfoform;
      if (roleInfoform.checkedList.length < 1) {
        this.$message({
          message: "请选择至少一个权限",
          type: "warning",
        });
        return;
      }
      let field_permissions = [];
      roleInfoform.field_data.map(item => {
        let obj = {};
        obj.name = item.name;
        obj.field_list = {};
        let check_num = 0;
        item.field_list.map(item2 => {
          console.log(item2.field_name, item2.name, item2.state, item.name)
          obj.field_list[item2.field_name] = item2.state;
          if (item2.state) check_num += 1;
        })
        if (check_num == 0) {
          obj.state = 3;
        } else {
          obj.state = item.field_list.length == check_num ? 1 : 2;
        }
        field_permissions.push(obj)
      })
      this.roleInfoform.submitBtn = true;
      adminApi.updOrganization({
        id: roleInfoform.id,
        field_permissions: JSON.stringify(field_permissions),//JSON.stringify(field_permissions)
      }).then(res => {
        if (res.code == 200) {
          this.$message({
            message: "修改成功",
            type: "success",
          });
          this.handleClose();
          this.getList();
        }
      })
    },

    // 获取列表
    getList() {
      this.tableLoading = true;
      adminApi.getOrganizationList({
        type: 0,
        field_permissions: 1,
        is_enterprise_personnel: 1
      }).then(res => {
        console.log(res, "获取列表数据")
        this.tableLoading = false;
        if (res.code == 200) {
          this.tableData = res.data;
        }
      }).catch(err => {
        this.tableLoading = false;
      })
    },
  }
}

</script>

<style lang="scss" scoped>
@import './index.scss';
</style>